<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>jQuery Mobile Bootstrap Theme</title>
		<link rel="stylesheet" href="../themes/Bootstrap.css">
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
		<link rel="stylesheet" href="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.min.css" />
		<link rel="stylesheet" href="../themes/jquery.mobile.icons.min.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
		<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.core.min.js"></script>
    	<script type="text/javascript" src="http://cdn.jtsage.com/datebox/1.4.5/jqm-datebox-1.4.5.mode.calbox.min.js"></script>
    	<script type="text/javascript">
		    $(document).ready(function(){
				
				initDate();
				
				
			});
			
			
			function initDate() {
				var	date1 = new Date();
				var	date2 = new Date();
				var	date3 = new Date();
				
				var standDt ='';
				var endDt ='';
				var startDt ='';
					
				if (0 === date1.getDay()) {
					date1.setDate(date1.getDate() - 2);
					date2.setDate(date2.getDate() - 3);
					date3.setDate(date3.getDate() - 93);
				} else if (1 === date1.getDay()) {
					date1.setDate(date1.getDate() - 3);
					date2.setDate(date2.getDate() - 4);
					date3.setDate(date3.getDate() - 94);
				} else {
					date1.setDate(date1.getDate() - 1);
					date2.setDate(date2.getDate() - 2);
					date3.setDate(date3.getDate() - 92);
				}
				
				standDt = date1.getFullYear() + ("00" + (date1.getMonth() + 1)).slice(-2) + ("00" + date1.getDate()).slice(-2); 
				endDt = date2.getFullYear() + ("00" + (date2.getMonth() + 1)).slice(-2) + ("00" + date2.getDate()).slice(-2);
				startDt = date3.getFullYear() + ("00" + (date3.getMonth() + 1)).slice(-2) + ("00" + date3.getDate()).slice(-2);
				alert('standDt : ' + standDt + ' endDt : ' +  endDt + '  startDt :  ' +  startDt);
			
			}
			
			function getList() {
			
				var data = {};
					data.day = "title";
					
			
				$.ajax({
				type: 'POST',
				url: 'http://127.0.0.1:3000/search',
				data: JSON.stringify(data),
				dataType : "json", 
				contentType: 'application/json',
				beforeSend: function () {
			            $.blockUI({ 
			                message: '<img src="../themes/images/ajax-loader.gif" width="50" height="50"/>',
			                css: { 
			                    top:  ($(window).height() - 100) /2 + 'px', 
			                    left: ($(window).width() - 100) /2 + 'px',
			                    color:      '',
			                    border:     '',
			                    backgroundColor:'',                     
			                    width: '100px' 
			                }                
			                
			            }); 
			     },
				success : function(data){ // 성공시 data값.
					$.unblockUI(); 
					if($.isArray(data)){//배열확인
						$('#mytable tbody').empty()
							 .append( newRows )
							 .closest( "#mytable" )
		           			 .table("refresh" )
		                	 .trigger( "create" );
					}
				},
			    error : function(request, status, error) {
				 //통신 에러 발생시 처리
					alert("code : " + request.status + "\r\nmessage : " + request.reponseText +" \r\n error : " + error);
					$.unblockUI(); 
					}
				})
			}
		
		</script>
		
		</script>
   </head>
	<body>
		<div data-role="page" data-theme="a">
			<div data-role="header" data-position="inline">
				<h1>jQuery Mobile Bootstrap Theme</h1>
				<div data-role="navbar">
					<ul>
						<li><a href="index.html" data-icon="home">Home</a></li>
						<li><a href="buttons.html" data-icon="star">Buttons</a></li>
						<li><a href="listviews.html" data-icon="grid" class="ui-btn-active">Lists</a></li>
						<li><a href="nav.html" data-icon="search">Nav</a></li>
						<li><a href="forms.html" data-icon="gear">Forms</a></li>
					</ul>
				</div>
			</div>
			<div data-role="content" data-theme="a">
				<h2 style="color: black">Listviews</h2>
				<div class="ui-field-contain">
          		  <label for="mode1">CalBox</label>
            		<input name="mode1" id="mode1" type="text" data-role="datebox" data-options='{"mode":"calbox"}' />
          		</div>
          	<button id="search" class="ui-btn ui-mini ui-shadow ui-corner-all ui-btn-icon-left ui-icon-search ui-btn-inline ">search</button>
				<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="Columns to display..." data-column-popup-theme="a">
         <thead>
           <tr class="ui-bar-a" >
             <th>Movie Title</th>
             <th data-priority="3">Year</th>
             <th data-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
             <th data-priority="4">Reviews</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>Citizen Kane</td>
             <td align="left">1941</td>s
             <td>100%</td>
             <td>74</td>
           </tr>
           <tr>
             <td><a href="#empty-anchor"  onclick="javascript:goInvstor('jli');"  data-rel="external">Casablanca</a></td>
             <td>1942</td>
             <td>97%</td>
             <td>64</td>
           </tr>
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
             <td>1972</td>
             <td>97%</td>
             <td>87</td>
           </tr>
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
             <td>1939</td>
             <td>96%</td>
             <td>87</td>
           </tr>
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
             <td>1962</td>
             <td>94%</td>
             <td>87</td>
           </tr>
           
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
             <td>1967</td>
             <td>91%</td>
             <td>122</td>
           </tr>
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
             <td>1939</td>
             <td>90%</td>
             <td>72</td>
           </tr>
           <tr>
             <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
             <td>1952</td>
             <td>89%</td>
             <td>85</td>
           </tr>
           <tr>
             <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
             <td>2010</td>
             <td>84%</td>
             <td>78</td>
           </tr>
         </tbody>
       </table>

				

			</div>
		</div>
	</body>
</html>